<style>
  #app{display: table;width:100%;}
/*  body{
    background: #000;
}*/
  .main-title{text-align: center;font-size:16px;font-weight: normal;margin-bottom: 20px;}
  .des{text-align: center;color:#999;margin-bottom: 2em;}
  /*.login-form{width: 400px;margin:13% auto 0;}*/
.login .login-page{width:400px;height:400px;margin:0 auto; padding: 20px 30px;
    border-radius: 8px;
    background: #fff;}

 .login .login_main{    height: 99.8vh;    background: #30313c url('../assets/img/login-bg.png') 50%/100% 100% no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;}
.login .login_content{    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    display: flex;

    align-items: center;

    justify-content: center;}
.login .login_content .el-select{width:100%;}
#code{
    font-size: 18px;
    letter-spacing:3px;
    color: #053d84;
    background: #f2f2f5;
}
.login  .verify .el-form-item__content{display: flex;justify-content: space-between;align-items: center;}
.login  .verify .el-form-item__content>div{width:33.33%;}
.login  .verify .el-input .el-input__inner{width:102px;}
/*.login  .forget{    background-color: hsla(0,87%,69%,.1);padding:0 10px;    border-radius: 4px;
    box-sizing: border-box;font-size: 12px;height:32px;line-height: 32px;display: inline-block;
    border: 1px solid rgba(64,158,255,.2);
    border-color: hsla(0,87%,69%,.2);
    color: #f56c6c;}
*/.login  .forget a{color:#7e8c8d;}
.login  .verification1,.btn_forget{text-align: center;}

</style>
<template>
  <div class="login">
    <div class="login_main">
      <div class="header_index">
        <myHeader></myHeader>

      </div>
      <div class="login_content">     

        <div class="g-center login-page" @keyup.enter="login">
          <el-form :model="loginForm" class="login-form" :rules="loginFormRules">
            <h1 class="main-title">登录</h1>
              <el-form-item >
                <el-select v-model="loginForm.region" placeholder="请选择">
                  <el-option label="China(中国)" value="china"></el-option>
                  <el-option label="Korea(韩国)" value="Korea"></el-option>
                </el-select>
              </el-form-item>
            <el-form-item  prop="username">
              <el-input
                :autofocus="true"
                placeholder="请输入手机号或邮箱" 
                v-model="loginForm.username">
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                placeholder="请输入密码"
                type="password"
                v-model="loginForm.password">
              </el-input>
            </el-form-item>
   
            <el-form-item class="verify" prop="verify">
              <el-input type="text" v-model="loginForm.verify" placeholder="验证码" class="yanzhengma_input" @blur.native="checkLpicma"></el-input>
              <el-input type="button" id="code" @click.native="createCode" class="verification1" v-model="checkCode"></el-input>
              <div class="btn_forget"><span class="forget"><router-link to="/forgetpassword">忘记密码</router-link></span></div>
            </el-form-item>
            <el-form-item>
              <el-button style="width:100%" @click.native="login" type="primary" :loading="isBtnLoading">{{btnText}}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
   
  </div>
</template>

<script>
import instance from '../api';

import axios from 'axios';
import CryptoJS from "crypto-js";
import * as util from '../assets/util.js';
import * as login from '../api/login.js';
 import cookie from '../api/cookie.js'

import md5 from 'js-md5';
import myHeader from './common/header'

var code ; //在全局定义验证码
export default {
  components:{
    myHeader
  },
  data() {
    return {
      loginFormRules:{
        username: [
            { required: true, message: '请输入手机号或邮箱', trigger: 'blur' },
          ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        verify: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ],
      },
      picLyanzhengma:'',
      checkCode:'',
      loginForm:{region:'china'},
      username: '',
      password: '',
      isBtnLoading: false
    };
  },
  computed: {
    btnText() {
      if (this.isBtnLoading) return '登录中...';
      return '登录';
    }
  },
  methods: {

      // 图片验证码

    createCode(){
      console.log("aaa")
      code = "";

      var codeLength =
      4;//验证码的长度 

      var random =
      new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',

      'S','T','U','V','W','X','Y','Z');//随机数

      for(var
      i = 0; 
      i < codeLength; 
      i++) {//循环操作 

      var index =
      Math.floor(Math.random()*36);//取得随机数的索引（0~35）

      code += random[index];//根据索引取得随机数加到code上

      } 

      this.checkCode =
      code;//把code值赋给验证码

    },

      // 失焦验证图和密码

    checkLpicma(){


      this.picLyanzhengma.toUpperCase();//取得输入的验证码并转化为大写

      if(this.picLyanzhengma ==
      '') {

      $(".login_content1 span:eq(2)").text("请输入验证码")

      $(".login_content1 span:eq(2)").removeClass("disappear");


      }else if(this.picLyanzhengma.toUpperCase() !=
      this.checkCode ) {
      //若输入的验证码与产生的验证码不一致时 

      console.log(
      this.picLyanzhengma.toUpperCase())

      console.log(code)

      $(".login_content1 span:eq(2)").text("验证码不正确")

      $(".login_content1 span:eq(2)").removeClass("disappear");

      this.createCode();//刷新验证码

      this.picLyanzhengma =
      '';

      }else { //输入正确时

        alert("验证码正确")

        $(".login_content1 span:eq(2)").addClass("disappear");

        $(".login_content1 span:eq(2)").text("请输入验证码")

        return true;
      }

    },
    login() {
      var vm = this;
      if (!vm.loginForm.username) {
        vm.$message.error('请填写用户名！！！');
        return;
      }
      if (!vm.loginForm.password) {
        vm.$message.error('请填写密码');
        return;
      } 
      if (!vm.loginForm.verify) {
        vm.$message.error('请填写验证码');
        return;
      }
      if(this.loginForm.verify.toLowerCase()!=this.checkCode.toLowerCase()){
         vm.$message.error('验证码输入错误');
        return;
      }

  /*    instance.defaults.headers.common['subSystemCode'] = 'resource_repast';*/
      let loginParams = {loginName: vm.loginForm.username, password:  md5('STARSAND_' + vm.loginForm.password)};
      // let loginParams = {loginName: vm.loginForm.username, password:   vm.loginForm.password};
      vm.isBtnLoading = true;
      console.log(loginParams)
          login.requestLogin.r(loginParams).then((res) => {
            vm.isBtnLoading = false;
            console.log(res)
            if(res.data.retCode==1){
               cookie.setCookie("merchant_token", res.data.data.userId, 30);
               util.session('token', res.data.data);

               sessionStorage.setItem("localUser",JSON.stringify(res.data.data))
               sessionStorage.setItem("userId",res.data.data.userId)
               util.session('islogin',"login");
               // util.session('users', res.data.data);
               this.$router.push("/personalcenter")
                // vm.$emit('login', vm.$router.currentRoute.query.from);
            }else{
              this.$message.error(res.data.retMsg)
            }
          })
  
    }
  },
  created() {
    sessionStorage.clear();
    sessionStorage.setItem('activeIndex','login');
    cookie.logout('merchant_token');

    this.createCode();
  }
};
</script>
